<template>
	<div>

		<div class="bg-wrap"></div>

		<div class="consultant-information-wrap">

			<div class="header">
				<img src="../../../static/header.png" alt="">

				<span class="user-name">田贝老师</span>
				<span>高级培训师</span>
			</div>

			<div class="nav-info">
				<div>1000次咨询</div>
				<div>好评率</div>
			</div>

			<div class="content">
				昔任宜信工程师，中融民信技术经理。主导黑马JavaEE课程5次大版本升级(v10.0至V12.5)
				。专注于分布式、高可用、高性能、微服务架构的设计。精通Java技术栈、SpringBoot.Redis、ElasticSearch、RabbitMQ.Docker、SpringCloud等有深入研究。
			</div>

			<div class="footer">
				<div>
					快速咨询
				</div>

				<div>
					发送问题
				</div>

			</div>



		</div>

		<div class="evaluate-list-wrap">
			<div class="nav-bar">

				<div>咨询评价</div>
				<div>10条评价</div>


			</div>

			<div class="evaluate-item">

				<div class="evaluate-item-header">
					<img src="../../../static/header.png" alt="">
					<div>大有作为</div>
				</div>
				<div class="evaluate-item-content">
					昔任宜信工程师，中融民信技术经理。主导黑马JavaEE课程5次大版本升级(v10.0至V12.5)
					。专注于分布式、高可用、高性能、微服务架构的设计。精通Java技术栈、SpringBoot.Redis、ElasticSearch、RabbitMQ.Docker、SpringCloud等有深入研究。
				</div>
				<div class="evaluate-item-footer">
					<div>
						问题类型:金融理财
					</div>
					<div>2023-10-30</div>
				</div>



			</div>

		</div>


	</div>
</template>

<script>
	import {
		consinfoAPI
	} from '../../../api/info.js'

	export default {
		data() {
			return {
				consinfoData: []
			}
		},
		mounted() {
			this.getConsinfo();
		},
		methods: {
			getConsinfo() {
				consinfoAPI().then(res => {
					this.consinfoData = res.data;
				})
			}
		}
	}
</script>

<style lang="scss">
	.bg-wrap {
		background-color: skyblue;
		height: 150px;
		width: 100%;
	}

	.consultant-information-wrap {
		width: 80%;
		margin: auto;
		margin-top: -50px;
		border: 1px solid #DEDEDE;
		background: white;
		padding: 12px 20px;
		border-radius: 30px;

		.header {
			display: flex;
			align-items: center;
			position: relative;
			margin-bottom: 60px;

			img {
				position: absolute;
				width: 100px;
				height: 100px;
				border-radius: 50%;
			}

			.user-name {
				margin-left: 130px;
			}

		}

		.nav-info {
			display: flex;
			margin-bottom: 10px;

			div {
				border: 1px solid #DEDEDE;
				border-radius: 8px;
				padding: 8px;
				margin: 4px;
				font-size: 14px;
			}
		}

		.content {
			margin-bottom: 30px;
		}

		.footer {
			display: flex;
			justify-content: end;
			margin-bottom: 20px;

			div {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 14px;
				width: 100px;
				height: 36px;
				color: white;
				background-color: #137fea;
				margin: 0 10px;
				border-radius: 10px;
			}
		}
	}

	.nav-bar {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
	}

	.evaluate-item {
		.evaluate-item-header {
			display: flex;
			align-items: center;

			img {
				// position: absolute;
				width: 100px;
				height: 100px;
				border-radius: 50%;
				margin-right: 30px;
			}

		}

		.evaluate-item-content {
			margin-top: 10px;
		}

		.evaluate-item-footer {
			display: flex;
			justify-content: space-between;
			margin-top: 10px;
		}
	}

	.evaluate-list-wrap {
		width: 80%;
		margin: auto;
		margin-top: 20px;
		border: 1px solid #DEDEDE;
		background: white;
		padding: 12px 20px;
		border-radius: 30px;
	}
</style>